<!-- 工位设置  -->
<template>
  <div class="station-box">
    <div class="station-header">
      <el-select
        class="select-station"
        v-model="aisleID"
        placeholder="请选要展示的产线"
        size="large"
        @visible-change="aisleIdChange"
        @change="aisleIdChangeVal"
        clearable
      >
        <el-option
          v-for="item in aisleData"
          :key="item.aisleId"
          :label="item.aisleName"
          :value="item.aisleId"
        />
      </el-select>
      <el-select
        :disabled="disabledPan"
        class="select-station"
        v-model="panID"
        placeholder="请选要展示的隔间"
        size="large"
        @visible-change="stationIdChange"
        clearable
      >
        <el-option
          v-for="item in panData"
          :key="item.panId"
          :label="item.panName"
          :value="item.panId"
        />
      </el-select>
      <el-button type="primary" @click="addStation" :disabled="adddisabled"
        >添加工位</el-button
      >
      <el-popconfirm
        title="确定要全部删除吗？"
        @confirm="RemoveStation(AkeystationId)"
      >
        <template #reference>
          <el-button type="danger" :loading="Akeyloading" :disabled="disabled"
            >一键删除</el-button
          >
        </template>
      </el-popconfirm>
    </div>
    <!-- 工位的展示 -->
    <!--  -->
    <div v-loading="loading" class="station-content">
      <div v-for="item in tableData" :key="item.panId">
        <div class="panName-box">
          <div>
            隔间名称<span>{{ item.panName }}</span>
          </div>
        </div>
        <el-table
          :data="item.stations"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange($event, item.panName)"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="stationName" label="工位名称" align="center">
          </el-table-column>
          <el-table-column
            prop="stationPosition"
            label="工位位置"
            align="center"
          />
          <el-table-column
            prop="stationPhotoCount"
            label="拍照次数"
            align="center"
          />
          <el-table-column
            prop="lastUpdateTime"
            label="最后更新时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
            align="center"
          >
            <template #default="scope">
              <!-- 修改 -->
              <el-button
                type="primary"
                :icon="Edit"
                circle
                @click="showDrawerClick(scope.row)"
              />
              <!-- 删除 -->
              <el-popconfirm
                title="确定要删除吗？"
                @confirm="RemoveStation(scope.row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    :loading="scope.row.removeloading"
                    :icon="Delete"
                    circle
                  />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="station-foot">
      <el-pagination
        layout="total, sizes, prev, pager, next,jumper"
        :total="total"
        :current-page="pageNum.page"
        :page-size="pageNum.num"
        :page-sizes="[5, 10, 30, 40]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <Drawer
      :showDrawer="showDrawer"
      @clickShow="clickShow"
      :amendStation="amendStation"
      :title="title"
      :AkeypanId="panID"
    />
    <DrawerChange
      :showDrawer="showDrawerChange"
      @clickShowChange="clickShowChange"
      :amendStation="amendStation"
      :title="title"
    />
  </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'
import { panInfo } from '@/api/pan'
import { aisleInfo } from '@/api/aisle'
import { stationInfo, removeStation } from '@/api/station'
import { Delete, Edit } from '@element-plus/icons-vue'
import Drawer from './components/Drawer'
import DrawerChange from './components/DrawerChange.vue'
import { ElMessage } from 'element-plus'
/**
 * 1.首先选择产线id
 * 2.根据产线id 选择隔间id
 * 3.根据隔间id进行工位的渲染
 */

// 分页器总条数
const total = ref(0)
const pageNum = ref({ page: 1, num: 5 })
// console.log(pageNum.value)
const handleSizeChange = (val) => {
  // console.log(val)
  pageNum.value.num = val
  station(aisleID.value, panID.value, pageNum.value)
}
const handleCurrentChange = (val) => {
  // 调用工位信息接口
  station(aisleID.value, panID.value, pageNum.value)
}
/**
 * 首先获取 所有隔间 id  根据隔间id渲染视图
 * 点击编辑数据
 */

// 添加是否可点击 默认不可点击
const adddisabled = ref(true)

// 这里用在 数据发生改变调用的 loading
const loading = ref(false)

// 1.产线
// 绑定的产线id
const aisleID = ref('')
// 存储所有产线数据
const aisleData = ref([])
// 调用产线接口 获取所有产线id 和 所有产线名称
const aisleIdChange = (val) => {
  if (val) {
    aisleInfo().then((res) => {
      // console.log(res)
      aisleData.value = res.data.map((item) => {
        const obj = {}
        obj.aisleId = item.aisleId
        obj.aisleName = item.aisleName
        return obj
      })
    })
  }
}
const aisleIdChangeVal = (val) => {
  console.log(val)
  station(val)
}

// 2.隔间
// 所有的隔间 id 进行选择
const panData = ref([])
// 选中的隔间id
const panID = ref('')
// 隔间默认不能点击
const disabledPan = ref(true)
/**
 * 监听 是否选择了产线
 * 如果选择了则让隔间的选择器能选择
 * 否则就不能选择，并且清空数据
 */
watch(
  () => aisleID.value,
  (val) => {
    // console.log(val)
    if (val !== '') {
      disabledPan.value = false
    } else {
      disabledPan.value = true
      panID.value = ''
    }
  }
)
// 封装一个 调用工位信息的方法
const station = (aisleId, panId, pageNum) => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    stationInfo({ panId: panId, aisleId: aisleId, pageNum: pageNum }).then(
      (res) => {
        tableData.value = res.data.records.map((item) => {
          item.stations.map((addpanName) => {
            addpanName.panName = item.panName
            addpanName.removeloading = false
            return addpanName
          })
          return item
        })
        // // 总条数
        total.value = res.data.total
      }
    )
  }, 300)
}

// 调用 隔间接口获取所有隔间id
const stationIdChange = (val) => {
  // console.log(val)
  if (val) {
    panInfo({ aisleId: aisleID }).then((res) => {
      // console.log(res)
      panData.value = res.data.map((item) => {
        const obj = {}
        obj.panName = item.panName
        obj.panId = item.panId
        return obj
      })
    })
  }
}

const tableData = ref([])
// 监听选择器的变化  如果选择 隔间id 则展示隔间信息
watch(
  () => panID.value,
  (val) => {
    // console.log(val)
    loading.value = true
    setTimeout(() => {
      loading.value = false
      // 判断选择器的值是不是空  根据窜则器的值进行处理
      if (val !== '') {
        adddisabled.value = false
        // 调用工位信息接口
        station(panID.value, aisleID.value, pageNum.value)
      } else {
        station()
        adddisabled.value = true
      }
    }, 800)
  }
)

// 默认展示所有工位信息调用工位信息接口
station()

/**
 *  新增修改相关
 */

// 抽屉的显示隐藏
const showDrawer = ref(false)
// 抽屉 title
const title = ref('')
// 如果是修改 点击获取当前行信息
const amendStation = reactive({})
// 点击添加工位
const addStation = () => {
  title.value = '添加工位'
  showDrawer.value = true
}
// 接收子集传递来的值 用来响应 抽屉的展示隐藏
const clickShow = (val, data) => {
  showDrawer.value = val
  if (data === '00000') {
    station(aisleID.value, panID.value, pageNum.value)
  }
}
const clickShowChange = (val, data) => {
  showDrawerChange.value = val
  if (data === '00000') {
    station(aisleID.value, panID.value, pageNum.value)
  }
}
/**
 *  修改工位
 */
const showDrawerChange = ref(false)
// 点击修改工位
const showDrawerClick = (scope) => {
  title.value = '修改工位'
  // 抽屉显示
  showDrawerChange.value = true
  // 传递点击当前行的数据
  Object.assign(amendStation, scope)
}
/**
 * 删除工位
 */

// 获取所有选中的工位 数据 因为只要 id所以取名叫 id 不要被误导
const AkeystationId = ref([])
// 一键删除的 loading
const Akeyloading = ref(false)
// 一键删除 是否可点击  默认不可点击
const disabled = ref(true)
const handleSelectionChange = (e, panName) => {
  // console.log(e)
  // console.log(panName)
  // 吧item里的隔间名字 不等于当前选中 隔间名字的 的返回出来 并赋给 AkeystationId
  // 如果是等于的 默认会返回 undefined
  AkeystationId.value = AkeystationId.value.map((item) => {
    if (item.panName !== panName) {
      return item
    }
  })
  // 把所有的选中项 合并到 AkeystationId
  AkeystationId.value = [...AkeystationId.value, ...e]
  AkeystationId.value = AkeystationId.value.filter((res) => {
    return res !== undefined
  })
  // console.log(AkeystationId.value)
}
watch(
  () => AkeystationId.value,
  (val) => {
    if (val.length > 0) {
      disabled.value = false
    } else {
      disabled.value = true
    }
  }
)

// 封装一键删除
const remove = (data) => {
  //  筛选数据 吧数据为 Id 的全部筛选出来并(返回)保存
  const stationIds = data.map((item) => {
    return item.stationId
  })
  removeStation({ stationId: stationIds })
    .then((res) => {
      ElMessage({
        message: res.message,
        type: 'success'
      })
      station(panID.value, aisleID.value, pageNum.value)
    })
    .catch((err) => {
      ElMessage({
        message: err.message,
        type: 'success'
      })
    })
  // console.log('删除')
}
// 删除和一键删除
const RemoveStation = (Data) => {
  /**
   * 判断是不是数组 如果是 则不变 如果不是则转换成数组
   * 如果是数组则点击的是一键删除
   * 否则点击的是单行删除
   */
  if (Data instanceof Array) {
    Akeyloading.value = true
    setTimeout(() => {
      Akeyloading.value = false
    }, 500)
    remove(Data)
  } else {
    Data.removeloading = true
    setTimeout(() => {
      Data.removeloading = false
      Data = [Data]
      remove(Data)
    }, 500)
  }
}
</script>

<style lang="scss" scoped>
.station-box {
  // position: relative;
  height: calc(100vh - 125px);
  overflow: hidden;
}
.panName-box {
  display: flex;
  padding: 10px;
  border: 1px solid rgb(239, 240, 240);
  align-items: center;
  div {
    margin: 0 10px;
  }
  span {
    margin-left: 15px;
    color: rgb(66, 87, 87);
  }
}

.select-station {
  margin-right: 15px;
}
.station-content {
  margin: 10px 0;
  height: calc(100vh - 220px);
  overflow-y: scroll;
  overflow-y: auto;
}
</style>
